<template>
  <view
    v-if="show"
    class="mask"
    :style="{backgroundColor: backgroundColor}"
    @touchmove.stop.prevent="stopPrevent"
  >
    <view 
      class="mask-content"
      :style="[{
        height: config.height, 
        transform: transform
      }]"
      @click.stop.prevent="stopPrevent"
    >
      <view class="view-content">
        <view class="view-text">
          微信支付
        </view>
        <view class="pay-buttons">
          <button plain @click="cancelPay">取消支付</button>
          <button type="primary" @click="confirmPay">支付</button>
        </view>
      </view>
      
    </view>
  </view>
</template>

<script>
export default {
  props:{
    contentHeight:{
      type: Number,
      default: 700
    },
    // 是否是tabbar页面
    hasTabbar:{
      type: Boolean,
      default: false
    },
    shareList:{
      type: Array,
      default: function(){
        return []
      }
    }
  },
  data() {
    return {
      transform: 'translateY(50vh)',
      timer: 0,
      backgroundColor: 'rgba(0,0,0,0)',
      show: false,
      config: {},
      orderNo: ''
    }
  },
  created() {
    const height = uni.upx2px(this.contentHeight) + 'px'
    this.config = {
      height: height,
      transform: `translateY(${height})`,
      backgroundColor: 'rgba(0,0,0,.4)',
    }
    this.transform = this.config.transform
  },
  methods:{
    toggleMask(){
      // 防止高频点击
      if(this.timer === 1){
        return
      }
      this.timer = 1
      setTimeout(() => {
        this.timer = 0
      }, 500)
				
      if(this.show){
        this.transform = this.config.transform
        this.backgroundColor = 'rgba(0,0,0,0)'
        setTimeout(() => {
          this.show = false
          this.hasTabbar && uni.showTabBar()
        }, 200)
        return
      }
				
      this.show = true
      // 等待mask重绘完成执行
      if(this.hasTabbar){
        uni.hideTabBar({
          success: () => {
            setTimeout(() => {
              this.backgroundColor = this.config.backgroundColor
              this.transform = 'translateY(0px)'
            }, 10)
          }
        })
      }else{
        setTimeout(() => {
          this.backgroundColor = this.config.backgroundColor
          this.transform = 'translateY(0px)'
        }, 10)
      }
    },
    // 防止冒泡和滚动穿透
    stopPrevent(){},
    // 取消微信支付
    cancelPay() {
      uni.redirectTo({
        url: `/pages/orderDetail/orderDetail?orderNo=${this.orderNo}`
      })
    },
    async confirmPay() {
      const res = await this.$api.json('payOrder', { orderNo: this.orderNo })
      this.$api.msg(res.msg)
      uni.redirectTo({
        url: `/pages/money/paySuccess?orderNo=${this.orderNo}`
      })
    }
  }
}
</script>

<style lang='scss'>
	.mask{
		position:fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display:flex;
		justify-content: center;
		align-items: flex-end;
		z-index: 998;
		transition: .3s;
		.bottom{
			position:absolute;
			left: 0;
			bottom: 0;
			display:flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 90rpx;
			background: #fff;
			z-index: 9;
			font-size: $font-base + 2rpx;
			color: $font-color-dark;
		}
	}
	
	.mask-content{
		width: 100%;
		height: 580rpx;
		transition: .3s;
		background: #fff;
		&.has-bottom{
			padding-bottom: 90rpx;
		}
		.view-content{
      height: 100%;
      .view-text {
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40rpx;
        font-weight: bold;
        color: $font-color-dark;
      }
      .pay-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        button {
          width: 300rpx;
        }
      }
		}
	}
	
</style>
